<template>
  <el-card class="box-card detail-panel" shadow="hover">
    <div slot="header" class="clearfix">
      <span>节点信息</span>
     <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
    </div>
    <div class="text item">
      <table>
        <tbody>
          <tr v-for="(v,k) in currentNode">
            <td class="detail-info">{{k}}</td>
            <td class="detail-info">{{v}}</td>
          </tr>
        </tbody>
      </table>

      <el-form ref="form"  label-width="0px" v-show="ifShow">
        <el-form-item>
          <el-select v-model="currentType" placeholder="请选择查询关系" class="type-select">
            <el-option v-for="(type,i) in relationshipTypes" :label="type" :value="urls[i]" :key="type"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit" class="submit-btn">查询关系</el-button>
        </el-form-item>
      </el-form>

    </div>
  </el-card>
</template>

<script>
    export default {
      name: "DetailPanel",
      data() {
        return {
          ifShow:false,
          currentNode:{},
          currentType:'',
          querySizer:{},
          // relationshipTypes:['ACTED_IN', "DIRECTED", "WROTE", "PRODUCED", 'REVIEWED'],
          // relationshipTypes:['belong_to', "be_created_by"],
          relationshipTypes:['属于', "作者为"],
          // urls:['actedby', "directed", "wrote", "produced", 'reviewed'],
          // urls:['belongto', "becreatedby"]
          urls:['belongto', "becreatedby"]
        }
      },
      methods:{
        // onSubmit(){
        //   var _this = this
        //   console.log("onSubmit方法")
        //   console.log(this.currentNode)
        //   if(this.currentType === ""){
        //     this.$message.error('未选择任何类型');
        //     return
        //   }
        //   else{
        //     this.axios.get("person/query/"+_this.currentType+"/"+_this.currentNode.name)
        //       .then(function (response) {
        //         if(response.status === 200) {
        //           _this.$emit('update',response.data, _this.currentNode,_this.currentType)
        //         }
        //       })
        //       .catch(function (error) {
        //         console.log(error)
        //       })
        //   }
        //   console.log(this.currentType)
        // },
        onSubmit(){//重写后的submit方法 
          var _this = this
          this.querySizer.currentNodeNum = this.currentNode.applicationNum
          this.querySizer.currentType = this.currentType
          this.querySizer.currentName = this.currentNode.name
          console.log("querySizer详细信息")
          console.log(this.querySizer)
          console.log("onSubmit方法")
          console.log(this.currentNode)
          console.log("该节点type类型")
          console.log(this.currentNode.type)
          if(this.currentType === ""){
            this.$message.error('未选择任何类型');
            return
          }
          else{
            // this.axios.post("/patent/"+_this.currentType,this.querySizer)
            this.axios.post("/" + _this.currentNode.type + "/"+_this.currentType,this.querySizer)
              .then(function (response) {
                if(response.status === 200) {
                  console.log("response信息")
                  _this.$emit('update',response.data, _this.currentNode,_this.currentType)
                }
              })
              .catch(function (error) {
                console.log(error)
              })
          }
          console.log(this.currentType)
        }
      }
    }
</script>

<style scoped>
  .detail-panel{
    position: fixed;
    right: 10px;
    top: 40px;
    border-radius: 4px;
    width: 200px;
    cursor: pointer;
  }
  .detail-info{
    width: 50%;
    text-align: left;
    font-size: 12px;
    font-weight: bolder;
  }
  .type-select{
    margin-top: 25px;
    height: 20px;
  }
  .submit-btn{
    width: 100%;
    height: 30px;
    line-height: 0px;
    margin-top: 0px;
  }
</style>
